import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom';
import { ListItemType } from '../../types'

const Index: React.FC = () => {
	const [list, setList] = useState<ListItemType[]>([]);
	const navigate = useNavigate()
	const fetchList = async () => {
		const resp = await axios.get('/api/list');
		const { data } = resp.data;
		console.log(data);
		setList(data)
	}

	useEffect(() => {
		fetchList()
	}, [])
	return (
		<div className="home">
			{
				list.map(v => {
					return (
						<dl key={v.id} onClick={() => navigate(`/detail/` + v.id)}>
							<dt>
								<img src={v.url} alt="" />
							</dt>
							<dd>
								<h3>{v.title}</h3>
								<p>{v.desc}</p>
								<p>￥：{v.price}</p>
							</dd>
						</dl>
					)
				})
			}
		</div>
	)
}

export default Index